<script>
import './style.css'
import {createTableDesigner} from '@/components/hhd/design/DesignTable/TableHelper';
import DesignBarContainer from '@/components/hhd/design/DesignTable/DesignBarContainer.vue';
import DesignFooter from '@/components/hhd/design/DesignTable/DesignFooter.vue';
import DesignBody from '@/components/hhd/design/DesignTable/DesignBody.vue';
export default {
  name: 'DesignTable',
  render(h) {
    return createTableDesigner(h, this.createChildren(h));
  },
  data() {
    return {
      selection: undefined,
      showGrid: true,
    }
  },
  methods: {
    createChildren(h) {
      return [
        this.createDesignBarContainer(h),
        this.createTableBody(h),
        this.createDesignFooterContainer(h)
      ];
    },
    createTableBody(h) {
      return h(DesignBody, {
        class: {
          'grid-design': this.showGrid
        },
        on: {
          selected: selection => this.selection = selection
        }
      })
    },
    createDesignFooterContainer(h) {
      return h(DesignFooter)
    },
    createDesignBarContainer(h) {
      return h(DesignBarContainer, {
        props: {
          showGrid: this.showGrid,
          selection: this.selection
        },
        on: {
          showGridChange: showGrid => this.showGrid = showGrid
        }
      })
    },
  }
}
</script>
